<template>
  <div>
    <!--
      第一次不禁用，点击添加或修改要禁用
      当显示AttrList不禁用，而显示AddOrUpdateAttr应该禁用
      看 isShowAttrList
    -->
    <CategorySelector :disabled="!isShowAttrList" />
    <!--
      切换显示组件 -> v-if / v-show
      第一次要渲染的是AttrList，点击添加属性才会渲染AddOrUpdateAttr

      选择使用v-if，组件在切换显示时，是会被卸载，然后再初始化加载
        卸载的话就不会保留之前的数据和校验结果，所以切换时，数据和校验结果就清空了
        此时还是没有最新的数据展示？
          给监视category3Id加上immediate：true，让其初始化时就生效，就会发送请求，获取最新的数据展示

      全局事件总线：
        隐藏要求：两个组件必须全部加载才能使用
        路由组件间一般不能使用全局事件总线
    -->
    <AttrList
      v-if="isShowAttrList"
      @setIsShowAttrList="isShowAttrList = false"
    />
    <AddOrUpdateAttr v-else @setIsShowAttrList="isShowAttrList = true" />
  </div>
</template>

<script>
import CategorySelector from '../categorySelector'
import AttrList from './components/AttrList.vue'
import AddOrUpdateAttr from './components/AddOrUpdateAttr.vue'

export default {
  name: 'Attr',
  components: {
    CategorySelector,
    AttrList,
    AddOrUpdateAttr
  },
  data() {
    return {
      isShowAttrList: true
    }
  }
}
</script>

<style>
</style>
